<template>
	<view class="content"> 
		<view class="list flex flex-col justify-start items-center">
			<view class="banner w100">
				
				     <swiper class="topView" indicator-dots="true" autoplay="true" :interval="interval" duration="400">
				     	<swiper-item v-for="(item, index) in list" :key="index" @click="gomenu(item.url)">
				     
				     		<view class="topView">
				     			<image class="topView" :src="$util.img(item.image) " mode="" lazy-load="true"
				     				:data-index="index">
				     
				     			</image>
				     		</view>
				     
				     
				     	</swiper-item>
				     
				     
				     </swiper>

			</view>
			
		
			<view class="tab flex flex-row justify-between items-center ">
				<view class="f_28 c_9d tabitem flex items-center justify-center" @click="tabclick(index)" :class="active==index?'active_'+index:''" v-for="(item,index) in tablist" :key="index">
					{{item.name}}
				</view>
			</view>
			
			
			<view class="grb flex flex-col w100 justify-center items-center">
			
			<view class="flex flex-col artice_list w100" v-if="tablist[active].name!='党务'">
				<view class="items flex flex-row justify-between items-center" v-for="(item,index) in article" @tap="gomenu('/pages/detail/detail?id='+item.id)">
					<image class="a-img" :src="$util.img(item.image)" mode=""></image>
					<view class="info flex flex-col items-start justify-start">
						<view class="title f_32 c_3d">{{item.title}}</view>
						<view class="title f_28 c_6d">{{item.description}}</view>
						<view class="flex flex-row justify-between items-center w100">
							<text class="f_24 c_9d">{{$util.timeStampTurnTimeDay(item.createtime)}}</text>
							<image class="read" src="../../static/image/readicon@2x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="" v-if="article.length==0">
					<u-empty
					        mode="favor"
							text='暂无数据'
					       
					>
					</u-empty>
				</view>
			</view>
			<view class="flex flex-col artice_list w100" v-else>
				<view class="menu flex flex-row justify-between items-center w100 flex-wrap">
					<view class="menu-item flex flex-col items-center" v-for="(item,index) in menu" :key="index"
						@click="gomenu(item.linkurl)">
						<image class="menu-icon" :src="$util.img(item.image)"  mode=""></image>
						<text class="f_32 c_3d mt10">{{item.name}}</text>
					</view>
				</view>
			</view>
			
			
			</view>
			
		</view>
	</view>
</template>

<script>
	
		import http from 'common/js/http.js';
	
	export default {
		mixins:[http],
		data() {
			return {
				tablist:[
					'党务',
					'财务',
					'村务',
					'事务'
				],
				active:0,
				article:[
					{
						img:'../../static/image/banner@2x.png',
						name:'小网格，大作用，警民联心救困者',
						desc:'严桥好人朱巨柏先进事迹测试文qqqq字长度...',
						time:'2023.11.08'
					},
					{
						img:'../../static/image/banner@2x.png',
						name:'小网格，大作用，警民联心救困者',
						desc:'严桥好人朱巨柏先进事迹测试文qqqq字长度...',
						time:'2023.11.08'
					},
				],
				interval:2000,
				list: [{
						poster: '../../static/image/banner@2x.png',

					},


					{
						poster: '../../static/image/banner@2x.png',

					},
					{
						poster: '../../static/image/banner@2x.png',

					},

				],
				menu:[
					// {					// 	image: '../../static/image/dangyuanxinxiicon@2x.png',					// 	name:'党员信息',
					// 	urllink:'/pages/zyzfu/dy?id=1'					// },{					// 	image: '../../static/image/liudongdangyuanicon@2x.png',					// 	name:'流动党员',
					// 	urllink:'/pages/zyzfu/dy?id=2'
											// },{					// 	image: '../../static/image/dangwugongkaiicon@2x.png',					// 	name:'党务公开'					// },{					// 	image: '../../static/image/meiyuedangjianicon@2x.png',					// 	name:'每月党建'					// },{					// 	image: '../../static/image/dangjianwenjuanicon@2x.png',					// 	name:'党建问卷',
					// 	urllink:'/pages/xsys/wen'
											// },],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}]
			}
		},
		onLoad() {
			this.getmenu()
			this.getbanner()
			this.gettab()
		},
		methods: {
			getmenu() {
				this.sendRequest({
						url: 'cun/index',
					data: {
						pid: 4,
						town_id: 1,
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
			
							this.menu = res.data
						}
					}
				})
			},
			gomenu(url) {
				uni.navigateTo({
					url: url
				})
			},
			getbanner(){
				this.sendRequest({
					url: 'cun/block',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.list = res.data
						}
					}
				})
			},
			gettab(){
				this.sendRequest({
					url: 'cun/index',
					data: {
						pid: 2,
						town_id: 1,
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.tablist = res.data
							this.active = 0
							this.getlist()
						}
					}
				})
			},
			tabclick(e){
				this.active = e
				this.getlist()
			},
		
			getlist(){
				this.sendRequest({
					url: 'cun/articlelist',
					data: {
						category_id: this.tablist[this.active].id,
						town_id:1,
						
		
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.article = res.data
							
						}
					}
				})
			},
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			}
		}
	}
</script>
 
<style lang="scss">
	.tab{
		margin-top: 50rpx;
		width: 100%;
		padding: 0 0rpx;
		.tabitem{
			width: 192rpx;
			height: 60rpx;
		}
		.active{
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 0 60rpx 0 0;
		}
		.active_0{
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 0 60rpx 0 0;
		}
		.active_1{
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 60rpx 0 0;
		}
		.active_2{
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 60rpx 0 0;
		}.active_3{
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 0 0 0;
		}
	}
	.artice_list{
		padding: 20rpx 35rpx;
		.items{
			margin-bottom: 46rpx;
		}
		.a-img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}
		.read{
			width: 76rpx;
		}
		.info{
			width: 500rpx;
			.title{
				width: 100%;
				margin-bottom: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.grb{
		padding-top:30rpx;
		
		background-color: #fff;
	}
	.grb-img{
		width: 200rpx;
	}
	page{
		background: #F9F9F9;
	}
	
	.menu{
		margin-top: 40rpx;
		.menu-item{
			width: 33.3%;
			margin: 20rpx 0;
			.menu-icon{
				width:80rpx ;
				height: 80rpx;
			}
		}
	}
	.menu::after{
		width: 33.3%;
		height: 0;
		content: '';
	}
	.banner{
		border-radius: 10rpx;
	}
	wx-swiper .wx-swiper-dot {
		
		background: rgba(0,0,0,0.1) !important;
		border: 1rpx solid #fff;
		}
	 
		wx-swiper .wx-swiper-dot-active {
			
			background: #fff !important;
		}
	
	// 	 .uni-swiper-dot {
	// 			// 指示点元素默认样式
	// 			width: 9rpx !important;
	// 			height: 9upx !important;
	// 			background: #C0C0C0 !important;
	// 			border: 1rpx solid #fff;
	// 		}
	
	// 	 .uni-swiper-dot-active {
	// 			// 指示点元素激活（当前选中）状态样式
	// 			width: 32rpx !important;
	// 			height: 8rpx !important;
	// 			background: #fff !important;
	// 			border-radius: 4rpx;
	// 		}
	.topView {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		height: 384rpx;
	}
	.list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
.gonggao{
			box-sizing: border-box;
			padding:0 16rpx;
			padding-top:10rpx ;
			width: 100%;
			height: 54px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.1);
			border-radius: 0 0 8rpx 8rpx;
			text{
				width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.item {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.name {
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_1 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(2, 86, 255, 0.8) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_2 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(14, 152, 105, 0.8) 0%, rgba(14, 152, 105, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_3 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 188, 2, 0.8) 0%, rgba(255, 188, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_4 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 2, 2, 0.8) 0%, rgba(255, 2, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}
		}

		.i_img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.i_img1 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


	}


	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 620rpx;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>